<template>
	<div>
		
		<div class="play" v-for="item in dataList.list">
			<div class="date">
				<span class="play_left">&lt;</span><span class="glyphicon glyphicon-calendar calendar">&nbsp;{{item.tr[0].time}}</span><span class="play_right">&gt;</span>
			</div>
			<div class="team_play">
				<div class="team_left">
					<dl>
						<dt><img v-bind:src="item.tr[0].player1logo"/></dt>
						<dd>&nbsp;&nbsp;&nbsp;&nbsp;{{item.tr[0].player1}}</dd>
					</dl>
				</div>
				<div class="team_center">
					<h3>{{dataList.title}}</h3>
					<div class="team_order">
						{{item.tr[0].link2text}}
					</div>
					<h1 class="time">{{item.tr[0].score}}</h1>
					<div class="play_btn">
						{{item.tr[0].link1text}}
					</div>
				</div>
				<div class="team_right">
					<dl>
						<dt><img v-bind:src="item.tr[0].player2logo"/></dt>
						<dd>{{item.tr[0].player2}}</dd>
					</dl>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data(){
			return {
				teamList: [],
				dataList: []
			}
		},
		methods:{
			request(type){
				this.$http({
					url: '/static/data.json',
					params: {
						category: type
					},
					method: 'GET'
				}).then(function(data){
					 console.log(data);
					
					this.teamList=JSON.parse(data.bodyText);
//					console.log("***"+this.teamList.result.list);
					this.dataList = this.teamList.result;
					console.log("***"+this.dataList.list[0].tr[0].player1);
				});
			}
		},
		mounted(){
			this.request();
		}
		}
</script>
<style>
	.time{
		font-size: 0.46875rem;
		color: #051c2d;
	}
	.play_btn{
		border-radius: 0.390625rem;
		position: relative;
		top: 0.078125rem;
		left: 0.8925rem;
		color: white;
		background-color: #006BB6;
		height: 0.640625rem;
		width: 2.390625rem;
		padding-top: 0.1125rem;
	}
	.team_order{
		
		
		padding-top:0.25625rem;
		color: #0e7ff9;
	}
	.team_center{
	padding-top: 0.1125rem;
		text-align: center;
		width: 4.15625rem;
	}
	.team_center h3{
		padding-top: 0.3125rem;
		font-size: 0.390625rem;
		color: #c6c6c6;
	}
	.team_right{
		padding-top: 0.3125rem;
		text-align: center;
		width:2.921875rem;
	}
	.team_left{
		padding-top: 0.3125rem;
		text-align: center;
		width:2.921875rem;
	}
	.team_left dl{
		
	}
	.team_left dt{
		position: relative;
		left:0.50625rem
	}
	.team_left dt,img{
		width: 2.125rem;
		height: 2.125rem;
	}
	.team_left dd{
		text-align: center;
	}
	.team_play{
		display: flex;
		
		border-top: 0.5rem solid #f0f0f0;
		height: 3.375rem;
	}
	.date{
		background-color: #072840;
		height: 1.1875rem;
		color: white;
		display: flex;
	}
	.calendar{
		line-height:1.0875rem ;
		text-align: center;
		width: 6.90625rem;
		font-size: 0.36875rem;
	}
	.play{
		height: 6.0625rem;
	}
	.play_left{
		line-height:1.1875rem ;
		text-align:right;
		width:1.546875rem;
		font-size: 0.46875rem;
	}
	.play_right{
		line-height:1.1875rem ;
		text-align: left;
		width:1.546875rem;
		font-size: 0.46875rem;
	}
</style>